<template>
	<view class="container">
		<!-- swiper box -->
		<view class="wrap">
			<u-swiper :list="list" height="850"></u-swiper>
		</view>
		<!-- 商品分类 -->
		<view class="good-icon-box">
			<view class="column-top-box" v-for="(columnItem,index) in indexAllData.column" :key="index" @click="navGoodList(columnItem)">
				<image class="column-img" :src="columnItem.iconImage" mode=""></image>
				<text>{{columnItem.name}}</text>
			</view>
			<view class="index-column-all-box" @click="toGoodPage">
				<text>查看全部商品</text>
				<text>→</text>
			</view>
		</view>
		<!-- <u-line style="height: 10rpx;" color="red" length="100%"></u-line> -->
		<view class="" style="height: 20rpx;width: 100%;background-color: #F3F2F0;"></view>
		<!-- 新品 -->
		<view class="new-box">
			<view class="new-title-box">
				<text class="new-title-style">新品.尝鲜</text>
			</view>
			<view class="">
				<scroll-view scroll-x="true">
					<view class="new-scroll-box">
						<view class="new-item-box" v-for="(newItem,index) in 6" :key="index">
							<view class="new-img-box">
								<image src="../../../static/19.png" mode=""></image>
							</view>
							<view class="new-item-text-box">
								<text class="text-28-4d4d4d">GG提花开衫</text>
								<text class="text-33-0f0f0f">￥999.00</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="" style="height: 20rpx;width: 100%;background-color: #F3F2F0;"></view>
		<!-- 人气 -->
		<view class="renqi-box">
			<view class="new-title-box">
				<text class="new-title-style">人气.超榜</text>
			</view>
			<view class="renqi-swiper">
				<view class="renqi-swiper-box">
					<u-swiper :list="list" mode="rect" :effect3d="true" height="440" bg-color="white"></u-swiper>
				</view>
			</view>
		</view>
		<view class="" style="height: 20rpx;width: 100%;background-color: #F3F2F0;"></view>
		<!-- 好物  list -->
		<view class="haowu-list-box">
			<view class="new-title-box">
				<text class="new-title-style">好物.甄选</text>
			</view>
			<view class="">
				<view class="haowu-item-box" v-for="(haowuItem,index) in 4" :key="index">
					<image src="../../../static/icon/classfiy1.png" mode=""></image>
					<view class="haowu-item-text-box">
						<text class="text-30-0f0f0f">漂白酸洗的牛仔套装</text>
						<text class="text-24-4d4d4d">李斯丹妮 | 潮酷质感</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		index
	} from "../../../common/api.js";
	export default {
		data() {
			return {
				indexAllData:{},
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},
		onLoad() {
			this._initSendIndex()
		},
		methods: {
			toGoodPage() {
				uni.navigateTo({
					url: "/pages/home/good-list/good-list"
				})
			},
			// 首页展示的路演列表
			async _initSendIndex() {
				let index = await this.$myRequest({
					url: '/index/index',
					method: "POST",
				})
				if(index.code == 1){
					this.indexAllData = index.data;
				}else{
					console.log(index)
				}
			},
			navGoodList(e){
				let id = e.id;
				let name = e.name;
				uni.navigateTo({
					url:"../good-list/good-list?columnId="+id+"&name="+name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.good-icon-box {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		row-gap: 20rpx;
		align-items: center;
	}

	.column-top-box {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.column-img {
		height: 64rpx;
		width: 64rpx;
		margin-top: 58rpx;
	}

	.column-top-box>text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0F0F0F;
		margin-top: 20rpx;
	}

	.index-column-all-box {
		grid-column: 1/5;
		height: 105rpx;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.index-column-all-box> :nth-child(1) {
		margin-left: 42rpx;
		margin-right: 42rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0F0F0F;
	}

	.index-column-all-box> :nth-child(2) {
		margin-left: 42rpx;
		margin-right: 42rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0F0F0F;
	}

	.new-box {}

	.new-title-box {
		margin: 41rpx 44rpx;
	}

	.new-title-style {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0F0F0F;
	}

	.new-scroll-box {
		display: flex;
	}

	.new-item-box :first-child {
		// margin-left: 10rpx;
	}

	.new-item-box :last-child {
		margin-right: 30rpx;
	}

	.new-item-box {
		width: 250rpx;
		margin-bottom: 50rpx;
		margin-left: 20rpx;
	}

	.new-img-box {
		height: 350rpx;
		width: 250rpx;
		// border: 1rpx solid red;
	}

	.new-img-box>image {
		height: 100%;
		width: 100%;
	}

	.new-item-text-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.new-item-text-box>text:nth-of-type(1) {
		opacity: 0.8;
		margin-bottom: 20rpx;
		margin-top: 26rpx;
	}

	.renqi-swiper-box {
		margin-bottom: 62rpx;
	}

	.haowu-item-box {
		margin: 40rpx 44rpx;
		position: relative;
	}

	.haowu-item-box>image {
		height: 440rpx;
		width: 100%;
	}

	.haowu-item-text-box {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.haowu-item-text-box>text:nth-of-type(1) {
		margin-top: 30rpx;
	}

	.haowu-item-text-box>text:nth-of-type(2) {
		margin-top: 25rpx;
		margin-bottom: 50rpx;
	}
</style>
